<!-- 分类页 !-->
<template >
    <div class="category">
      <!-- 搜索栏 -->
      <van-search shape="round" v-model="value" placeholder="请输入搜索关键词" />
      <div class="bottom">

        <div class="left">
                       <!-- 左侧边导航栏 -->
            <van-sidebar v-model="activeKey" @change="onChange">
                    <van-sidebar-item v-for="(item,index) in categoryList" :key="index" :title="item.name" />
            </van-sidebar>
        </div>
        <div class="right">
            <div class="banner">
                <img :src="img" alt=".">
                <p>{{nametext}}</p>
            </div>
            <h4>--- {{name}}  ---</h4>
            
            <van-grid :column-num='3'>
                <van-grid-item
                 :icon="item.wap_banner_url"
                 :text="item.name" 
                 v-for="(item,index) in subCategoryList"
                 :key="index"   
                />
            </van-grid>
        </div>
      </div>
   </div>
</template>

<script>
import {getCategory} from '@/utils/https.js'
import { getCategorycurrent } from '@/utils/https.js'
export default {
data(){
    return{
        value:'',
        activeKey:0,
        categoryList:[],
        subCategoryList:[],
        name:'',
        img:'',
        nametext:''
    }
},
created(){
        getCategory().then((res)=>{
            console.log(res);
            this.categoryList = res.data.data.categoryList;
            this.subCategoryList = res.data.data.currentCategory.subCategoryList;
            this.name = res.data.data.currentCategory.name;
            this.img = res.data.data.currentCategory.banner_url;
            this.nametext = res.data.data.currentCategory.front_name;
        })
    
},
methods:{
    onChange(index){
        console.log(index);
        this.activeKey = index;
        let Id = this.categoryList[index].id
        // console.log();
        getCategorycurrent({id:Id}).then((res)=>{

            this.subCategoryList = res.data.data.currentCategory.subCategoryList;
            this.name = res.data.data.currentCategory.name;
            this.img = res.data.data.currentCategory.banner_url;
            this.nametext = res.data.data.currentCategory.front_name;
            
        })
    }
}
}
</script>

<style lang='less' scoped>
.category{
   .bottom{
       width: 100%;
       display: flex;
       flex-direction: row;
       .left{
          width: 22%;
          background-color: #f7f8fa;
          .van-sidebar{
              width: 100%;
          }
       }
       .right{
             width: 78%;
            h4{
                margin: 20px  0;
                text-align: center;
                font-size: 17px;
            }
            .banner{
                margin: 0 auto;
                position: relative;
                height: 140px;
                width: 96%;
                // padding: 10px;
                border-radius: 10px;
                box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.952);
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    
                }
                p{
                    font-size: 16px;
                    color: white;
                    text-align: center;
                    line-height: 150px;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: rgba(26, 23, 23, 0.6);
                    left: 0;
                    top: 0;
                }
            }
           
       }
   }
}
</style>